<template>
	<a-modal
		class="app-modal"
		v-model:visible="visible"
		:width="width"
		:bodyStyle="bodyStyle"
		:destroyOnClose="true"
		:title="title"
		:centered="true"
		v-bind="customParam"
		:footer="null"
		@cancel="handleCancel"
	>
		<!-- 多语言 -->
		<a-config-provider :locale="getAntdLocale">
			<component
				v-if="view"
				:is="view.codeName"
				:context="context"
				:viewParams="viewParams"
				:name="view.codeName"
				:noViewCaption="true"
				openType="MODAL"
				@view-action="(name: string, action: IEvent<string>, data: IParam) => { handleViewAction(name, action, data); }"
				@view-init="(name: string, data: IViewAbility) => { handleViewInit(name, data); }"
				@view-destroy="(name: string, data: IParam) => { handleViewDestroy(name, data); }"
			/>
		</a-config-provider>
	</a-modal>
</template>
<script setup lang="ts">
import {
	IParam,
	IEvent,
	IViewAbility,
	IOpenViewResult,
	ICustomDialogOptions,
	isEmpty,
} from '@/core';
import { useViewActionStoreWithOut } from '@/store';
import { useLocale } from '@/locales';
import { ModalProps } from './model';

const props = defineProps(ModalProps);
const emit = defineEmits(['modal-action']);
const visible = ref<boolean>(true);
const bodyStyle = reactive({ height: 'calc(100vh - 100px)' });

//	模态宽度
const width = computed(() => {
	if (props.view && props.view.width) {
		return props.view.width;
	}
	const windowWidth = window.innerWidth;
	if (windowWidth > 100) {
		return windowWidth - 100;
	}
	return windowWidth ? windowWidth : 600;
});

const title = computed(() => {
	let title = '';
	if (props.view.title) {
		title = props.view.titleTag
			? App.ts(props.view.titleTag, props.view.title)
			: props.view.title;
	} else if (props.view.caption) {
		title = props.view.captionTag
			? App.ts(props.view.captionTag, props.view.caption)
			: props.view.caption;
	}
	return title;
});

onMounted(() => {
	if (props.view && props.view.height) {
		bodyStyle.height = props.view.height + 'px';
	}
});
const { getAntdLocale } = useLocale();
let result: IOpenViewResult = { ok: false, data: [] };
const handleViewAction = (
	name: string,
	action: IEvent<string>,
	data: IParam
) => {
	// 视图选中数据
	if (Object.is(action, 'viewDataChange')) {
		if (data && Array.isArray(data) && data.length > 0) {
			result = { ok: true, data: JSON.parse(JSON.stringify(data)) };
		}
		// 视图双击数据关闭模态
	} else if (
		Object.is(action, 'viewDataActive') ||
		Object.is(action, 'viewClose')
	) {
		if (data && Array.isArray(data) && data.length > 0) {
			result = { ok: true, data: JSON.parse(JSON.stringify(data)) };
		}
		handleModalClose();
	}
};

const handleViewInit = (name: string, data: IViewAbility) => {
	// todo
};

const handleViewDestroy = (name: string, data: IParam) => {
	handleModalClose();
};

const handleCancel = () => {
	visible.value = true;
	handleModalClose();
};

const handleModalClose = () => {
	const { getStateByTag, removeAppViewsByTag } = useViewActionStoreWithOut();
	const closeModal = () => {
		visible.value = false;
		emit('modal-action', result);
	};
	const state = getStateByTag(props.view.codeName);
	if (state) {
		const dialogOption: ICustomDialogOptions = App.getViewCloseHint(
			props.view.codeName
		);
		App.getDialogHelper().custom({
			...dialogOption,
			ok: () => {
				removeAppViewsByTag(props.view.codeName);
				closeModal();
			},
		});
	} else {
		closeModal();
	}
};
</script>
